<template>
	<div class="wrap sysmanagement">
		<div class="page-title">
			<h3>集中管理</h3>
		</div>
		<div class="table-wrap">
			<table>
				<thead class="thead-bottom-line">
					<tr>
						<th style="width:380px;text-align: right;padding-right: 10px">内容</th>
						<th style="width:640px;padding-left:75px">信息</th>
						<th style="width:180px;text-align:center ">操作</th>
					</tr>
				</thead>
				<tbody @keyup.enter='savedata()'>
					<tr>
						<td>服务器IP/域名:</td>
						<td>
							<input type="text" @focus="empty('.ip')" v-model=address class="ip compile" @blur="testVal('.ip','realm_ip',false)" >
								<span class="mi"> *必填</span>
						</td>
						<td class="colspan" rowspan="4" style="background-color: #fff;text-align: center;vertical-align: middle;">							
							<button class="btn-active button button--aylen" @click="savedata()" >确&nbsp&nbsp定</button>
						</td>
					</tr>
					<tr>
						<td>端口:</td>
						<td>
							<input type="text"   v-model="port" class="port compile" @blur="testVal('.port','prot',false)"  @focus="empty('.port')">
							<span class="mi"> *必填</span>
						</td>
					</tr>
					<tr>					
						<td>密钥:</td>
						<td>
							<input type="password" @blur="leave('.password')" @focus="empty('.password')" v-model="secret"  class="password compile">
							<span class="mi"> *必填</span>
						</td>
					</tr>
          <tr>					
						<td>状态:</td>
						<td>
							{{this.status}}
						</td>
					</tr>
				</tbody>
			</table>
			<noticeModal :id="'srueModal'" :title="'提示'" :status ="requestStatus" :errorMsg="errorMsg"></noticeModal>
		</div>
	</div>
</template>
<script>
 import SystemService from 'services/systemService'
 import noticeModal from 'components/common/noticeModal'
 import formatTest from 'libs/formatTest'
 export default {
	  data() {
			return {
				oper:'get_remote',
			  address:'',
			  port:'',
			  secret:'',
			  status:'',
			  isok:true,
			  portStatus:true,
			  ipStatus:true,
			  id:'modals',
			  title:'提示',
			  requestStatus:'',
			  errorMsg:'',
			  type:'error' 
			}
		},
		created: function () {
			this.getData();
		},
		methods: {
			saveSysInfo:function() {
				$("input").css("background-color","#fff")
			},
			testVal: function(ele, reg,empty) {
				let test = new formatTest(ele, reg, empty)
				switch (ele) {
					case '.port':
						this.portStatus=test.testFormat()
						break;
					case '.ip':
						this.ipStatus=test.testFormat()
						break;
					default:
						break;
				}	
				$(ele).css("outline",'none')		
			},
			isEmpty:function(ele) {
				let val = $(ele).val()
				if (!val) {
					this.testStatus=false
					$(ele).css("border",'1px solid #b63039')
					$(ele).addClass("animated shake")
					$(ele).parent().find('.mi').css('color', '#b63039')
					setTimeout(function() {
						$(ele).removeClass('animated shake')
					}, 200)
				} else {
					$(ele).parent().find('.mi').css('color', '#d2d2d2')
						$(ele).css('border', '1px solid #e8e8e8')
				}
				$(ele).css("outline",'none')	
			},
			empty:function(ele) {
				let test = new formatTest(ele)
				test.notEmpty()
				$(ele).css("outline",'1px solid #96ccff')
				$(ele).parent().find('.mi').css('color', '#d2d2d2')
			},
			leave(ele) {
				if ($(ele).val()=='') {
					this.isEmpty(ele)
				}
			},
			 getData() {
				this.requestStatus='ing'
				SystemService.getSysPolice()
				.then((res) => {
					
					if (res.errcode === 0) {
						this.requestStatus='ok'
						let dataArr = res['4'].split('|')
						this.address = dataArr[0]
						this.port = dataArr[1]
						this.secret = dataArr[2]
						if (dataArr[3]==1) {
							this.status='已链接'
						} else {
							this.status='未链接'
						}
					} else {
						this.requestStatus='error'
						this.errorMsg=res.errorMessage
					}			
        })
			 },
			 savedata() {
				if (this.portStatus&&this.ipStatus&&$(".password").val()) {
					let params = `${this.address}|${this.port}|${this.secret}`
					SystemService.setSysPolice(params)
					.then((res) => {
						if (res.errcode === 0) {
							$("#srueModal").modal('show')
							this.getData()
						}
					})
					
				} else {
					this.isEmpty(".password")
					this.testVal('.port','prot',false)
					this.testVal('.ip','realm_ip',false)
				}	
			 }
		 },
		 components:{
			 noticeModal
		 }
 }
</script>